<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>H+ 后台主题UI框架 - 基本表单</title>
    <link th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/chosen/chosen.css}" rel="stylesheet"/>
    <link th:href="@{/css/plugins/iCheck/custom.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>修改会议
                        <small>修改会议记录</small>
                    </h5>
                </div>
                <div class="ibox-content ">
                    <form id="modifyForm" method="post" class="form-horizontal m-t " action="modifyMeet" onsubmit="return modifyMeet()">
                        <div class="form-group ">
                            <label class="col-sm-2 control-label ">会议组织者</label>

                            <div class="col-sm-10 ">
                                <p class="form-control-static " id="personMsg ">
                                    <img th:src="${organizer.userAvator}" style="width:30px;height: 30px; " class="img-circle"/>
                                    <span style="padding-left: 10px; " th:text="${organizer.userName}"></span>
                                </p>
                            </div>
                        </div>
                        <div class="hr-line-dashed "></div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label ">会议时间</label>
                            <div class="col-sm-4 ">
                                <input class="laydate-icon form-control layer-date " id="meetTime" placeholder="选择会议时间" th:value="${#dates.format(meetRecord.meetStart, 'yyyy-MM-dd hh:mm:ss')}"
                                       name="meetTime" required="required"/>
                            </div>
                            <label class="col-sm-2 control-label ">会议地点</label>
                            <div class="col-sm-4 ">
                                <div class="form-group">
                                    <div class="input-group">
                                        <select data-placeholder="选择省份..." class="chosen-select col-xs-12 " tabindex="2">
                                            <option value="" disabled="">请选择会议室</option>
                                            <option hassubinfo="true" th:each="room, stat : ${roomList}" th:text="${room.roomId}" th:value="${room.roomId}"></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed "></div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label ">会议时长</label>

                            <div class="col-sm-4 ">
                                <input id="meetDuring" type="text " placeholder="会议时长 " class="form-control " name="meetDuring" th:value="${meetRecord.meetDuring}" required="required"/>
                            </div>
                        </div>
                        <div class="hr-line-dashed "></div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label ">会议主题</label>

                            <div class="col-sm-10 ">
                                <input id="meetTheme" type="text" placeholder="会议主题 " class="form-control " name="meetTheme" th:value="${meetRecord.meetTheme}" required="required"/>
                            </div>
                        </div>
                        <div class="hr-line-dashed "></div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label ">删除参会人员</label>
                            <div class="col-sm-10 " id="userList">
                                <div class="col-sm-2 " th:each="User,stat:${meetRecord.meetAttendees}" >
                                    <input name="attendeeId" th:value="${User.userId}" type="hidden"/>
                                    <p style="border:2px solid rgba(2, 105, 74, 0.7) ; padding: 2px; width: 100%; letter-spacing: 5px; border-radius: 10px" >
                                        <img th:src="${User?.userAvator}" class="img-circle" style="width:30px;height: 30px; "/><span style="margin-left: 10px; vertical-align: middle;
									" th:text="${User.userName}"></span><a mark="delAttendee"><span class="glyphicon glyphicon-remove "
                                                        style="display:inline-block; color: #B94A48; vertical-align: -2px;"></span></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed "></div>
                        <div class="form-group ">
                            <label class="col-sm-2 control-label ">添加参会人员</label>
                            <div class="col-sm-10 ">
                                <div class="input-group ">
                                    <select data-placeholder="选择参会人员 " class="chosen-select " multiple="" name="addAttendeesId"
                                            style="width:350px; " tabindex="4 ">
                                        <option value=" " disabled=" ">请选择参与人员姓名</option>
                                        <option hassubinfo="true" th:each="user,stat : ${userList}" th:text="${user.userName}" th:value="${user.userId}"></option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="hr-line-dashed "></div>
                        <div class="form-group ">
                            <div class="col-sm-4 col-sm-offset-2" style="left: 0px" >
                                <button class="btn btn-primary" type="submit" style="margin-right: 20px">提交</button>

                                <button class="btn btn-default btn-outline" type="reset" style="margin-right: 20px">取消</button>

                                <button class="btn btn-default btn-outline" type="button" onclick="backHistory()">返回</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js?v=2.1.4 }"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.6 }"></script>
<!-- layerDate plugin javascript -->
<script th:src="@{/js/plugins/layer/laydate/laydate.js }"></script>

<!-- 自定义js -->
<script th:src="@{/js/content.js?v=1.0.0 }"></script>


<!--  表单验证 -->
<!-- jQuery Validation plugin javascript-->
<script th:src="@{js/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{js/plugins/validate/messages_zh.min.js}"></script>
<script th:src="@{js/demo/form-validate-modifymeet.js}"></script>


<!-- iCheck -->
<script th:src="@{/js/plugins/iCheck/icheck.min.js }"></script>
<!-- Chosen -->
<script th:src="@{/js/plugins/chosen/chosen.jquery.js }"></script>

<script th:src="@{/js/demo/form-advanced-meet.js }"></script>
<!-- layer弹出层 -->
<script th:src="@{/js/plugins/layer/layer.js}"></script>
<script>
    laydate({
        elem: "#meetTime",
        event: "focus",
        format: 'YYYY/MM/DD hh:mm:ss',
        istime: true,
        // isToday:false,
        min: laydate.now(),
        max: '2099-06-16 23:59:59'
    })
    var xhr =new XMLHttpRequest();
    xhr.timeout = 7000;
    xhr.timeout = function () {
        layer.msg("连接超时，请重试");
    }
    function modifyMeet(thisz) {
        var form = document.getElementById("modifyForm")
        var formData = new FormData(form);
        xhr.open('post',form.action);
        xhr.send(formData);
        xhr.onreadystatechange = function (ev) {
            var responses = JSON.parse(xhr.response);
            /* <![CDATA[ */
            if(responses.code == 200 && xhr.readyState == 4 && xhr.status == 200){
                layer.confirm("会议修改成功",{
                    icon: 1,
                    btn:["确定"]
                },function () {
                    location.href = "toMeetList";
                });
                return;
            }
            if(responses.code == 500 && xhr.readyState == 4 && xhr.status == 200){
                var massage = "会议修改失败";
                if(responses.msg && responses.msg != null) massage = responses.msg+"\n"+massage;
                var index=layer.confirm(massage,{
                    icon: 2,
                    btn:["确定"]
                },function () {
                    layer.close(index);
                });
            }
            /* ]]> */
        }
        return false;

    }
    function backHistory() {
        history.back();
    }
    /* <![CDATA[ */
    var $delAttendee = $("[mark = delAttendee]");
    $delAttendee.click(function () {
        var attendeeId = $(this).parents("p").prev().attr("value");
        var attendeeName = $(this).prev().text();
        var userChosen = $("[name = addAttendeesId]");
        userChosen.append('<option hassubinfo="true"  value="'+ attendeeId +'">'+ attendeeName +'</option>');
        $(this).parents("p").parent().remove();
        $("#userList").append('<input type="hidden" name="deleteAttendeesId" value="'+ attendeeId +'"/>')
        userChosen.trigger("chosen:updated");
        userChosen.chosen();
    })
    /* ]]> */
</script>
</body>
</html>